<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

import { useRouter, useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";

import GatherSix from "../../gather/gathersix.vue";
import Server from "./server.vue";
import Port from "./port.vue";
import Ip from "./Ip.vue";
import Url from "./url.vue";
import IsReport from "./IsReport.vue";
import YisiAsset from "./YisiAsset.vue";
import NotSurviveAsset from "./NotSurviveAsset.vue";
import HighRiskPort from "./HighRiskPort.vue";
import Vulnerability from "./Vulnerability.vue";

const route = useRoute();
const router = useRouter();
defineOptions({
  name: "TaskDetail"
});

const activeName = ref("url");
onMounted(() => {
  // const tp = route.query.tp;
  // activeName.value = tp as string;
});

const ipdetailsearchformRef = ref<FormInstance>();

const ipdetailsearchform = reactive({
  iptype: "",
  ipvalue: "",
  port: "",
  system: "",
  domain: "",
  cdn: "",
  updateTime: ""
});

const ipdetailsearchformRules = reactive<FormRules>({
  iptype: [],
  ipvalue: [],
  port: [],
  system: [],
  domain: [],
  cdn: [],
  updateTime: []
});

//tab点击
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

//清空表单
const clearIpSearchForm = formIns => {
  formIns.resetFields();
};

//批量删除
const muiltDelete = params => {};
//批量导出
const muiltExport = params => {};
</script>

<template>
  <div class="right-container">
    <data class="gather-container" v-if="false">
      <GatherSix class="gather-box-blue" />
    </data>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">相关任务详情</div>
      </template>

      <div>
        <!-- type="card" -->
        <el-tabs
          v-model="activeName"
          type="border-card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <!-- <template #label>
              <span class="custom-tabs-label">
                <el-icon><calendar /></el-icon>
                <span>端口</span>
              </span>
            </template> -->
          <el-tab-pane label="URL" name="url">
            <Url v-if="activeName === 'url'"
          /></el-tab-pane>
          <el-tab-pane label="未报备资产" name="notreport">
            <IsReport v-if="activeName === 'notreport'"
          /></el-tab-pane>
          <el-tab-pane label="未存活资产" name="notsurvive">
            <NotSurviveAsset v-if="activeName === 'notsurvive'"
          /></el-tab-pane>
          <el-tab-pane label="高危端口" name="port">
            <HighRiskPort v-if="activeName === 'port'"
          /></el-tab-pane>
          <el-tab-pane label="高危漏洞" name="vulnerability">
            <Vulnerability v-if="activeName === 'vulnerability'"
          /></el-tab-pane>
          <el-tab-pane label="疑似资产" name="yisiasset">
            <YisiAsset v-if="activeName === 'yisiasset'"
          /></el-tab-pane>
          <el-tab-pane label="服务" name="server" v-if="false"
            ><Server
          /></el-tab-pane>
          <el-tab-pane label="ip" name="ip" v-if="false">
            <Ip />
          </el-tab-pane>
          <el-tab-pane label="指纹统计" name="finger" v-if="false">
            <div class="search-box">
              <el-form
                :inline="true"
                :model="ipdetailsearchform"
                :rules="ipdetailsearchformRules"
                ref="ipdetailsearchformRef"
                class="demo-form-inline"
                size="small"
              >
                <el-form-item label="ip类别" prop="iptype">
                  <el-input
                    v-model="ipdetailsearchform.iptype"
                    placeholder="ip类别"
                    maxlength="30"
                    clearable
                  >
                    <template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="ip" prop="ipvalue">
                  <el-input
                    v-model="ipdetailsearchform.ipvalue"
                    placeholder="ip"
                    maxlength="30"
                    clearable
                  >
                    <template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="端口" prop="port">
                  <el-input
                    v-model="ipdetailsearchform.port"
                    placeholder="端口"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="操作系统" prop="system">
                  <el-input
                    v-model="ipdetailsearchform.system"
                    placeholder="操作系统"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="域名" prop="domain">
                  <el-input
                    v-model="ipdetailsearchform.domain"
                    placeholder="域名"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="CDN" prop="cdn">
                  <el-input
                    v-model="ipdetailsearchform.cdn"
                    placeholder="cdn"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="更新时间" prop="updateTime">
                  <el-input
                    v-model="ipdetailsearchform.updateTime"
                    placeholder="更新时间"
                    clearable
                    ><template #suffix>
                      <!-- prefix -->
                      <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    @click="clearIpSearchForm(ipdetailsearchformRef)"
                    >清除</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="muiltExport"
                    >批量导出</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="muiltDelete"
                    >批量删除</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs--border-card) {
  border-right: none;
  border-bottom: none;
  border-left: none;
}
:deep(.el-tabs--border-card > .el-tabs__header) {
  background: #dfe8f5;
}

:deep(.el-tabs__item) {
  font-weight: bold;
  min-width: 100px;
}

:deep(.el-form-item__label) {
  min-width: 68px;
}

:deep(.el-card__header) {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: none;
}

:deep(.el-card__body) {
  padding: 0;
}

.right-container {
  height: 100%;
  margin: 10px !important;
  border-radius: 5px;
  background: white;
}

.gather-container {
  display: block;
  // margin: 10px 10px 0 10px;
  margin-bottom: 10px;
}
</style>
